import React from 'react';
// import textBg from '../../assets/png/textBg-temp.png';
import { spring, useCurrentFrame, useVideoConfig } from 'remotion';
// import customFont from '../assets/font/YouSheBiaoTiHei.ttf';
import customFont from '../assets/font/MiSans-Bold.ttf';

// 添加 @font-face 规则
const fontFace = `
  @font-face {
    font-family: 'MiSans-Bold';
    src: url(${customFont}) format('truetype');
  }
`;

interface VideoTextProps {
  text: string;
  style?: React.CSSProperties;
  highlightTexts?: string[];
}

// 添加文字组件
const VideoText: React.FC<VideoTextProps> = ({
  text,
  style = {},
  highlightTexts = [],
}) => {
  const frame = useCurrentFrame();
  const { fps } = useVideoConfig();

  // 创建文字动画效果
  const opacity = spring({
    frame,
    fps,
    from: 0,
    to: 1,
    durationInFrames: 30,
  });

  // 合并默认样式和传入的自定义样式
  const containerStyle: React.CSSProperties = {
    position: 'absolute',
    bottom: '10%',
    left: '50%',
    transform: 'translateX(-50%)',
    display: 'inline-block',
    maxWidth: '95%',
    padding: '20px 40px',
    textAlign: 'center',
    backgroundPosition: 'center',
    backgroundRepeat: 'no-repeat',
    borderRadius: '15px',
    lineHeight: 1.4,
    opacity,
    color: style.color || 'white',
    fontSize: style.fontSize || 60,
    fontWeight: style.fontWeight || 'bold',
    fontFamily: 'MiSans-Bold, sans-serif',
    backgroundSize: '100% 100%',
    ...style,
  };

  const chatBoxStyle: React.CSSProperties = {
    fontSize: '70px',
    padding: '20px',
    display: 'flex',
    flexWrap: 'wrap',
    justifyContent: 'center',
    width: 'max-content',
    maxWidth: '100%',
    flexDirection: 'column',
    alignItems: 'center',
  };

  const lineStyle: React.CSSProperties = {
    display: 'flex',
    flexWrap: 'wrap',
    justifyContent: 'center',
    width: '100%',
  };

  const characterStyle: React.CSSProperties = {
    display: 'inline-block',
    color: 'white',
    WebkitTextStroke: '1px #0066ff',
    marginBottom: '10px',
  };

  // 修改 isHighlighted 函数以处理空格
  const isHighlighted = (char: string, index: number, fullText: string) => {
    if (char === ' ') return false; // 空格不需要高亮
    return highlightTexts.some((highlight) => {
      const startIndex = fullText.indexOf(highlight);
      if (startIndex === -1) return false;
      const endIndex = startIndex + highlight.length;
      return index >= startIndex && index < endIndex;
    });
  };

  return (
    <>
      <style>{fontFace}</style>
      <div style={containerStyle}>
        <div style={chatBoxStyle}>
          <div style={lineStyle}>
            {text.split('').map((char: string, charIndex: number) => {
              const charKey = `char-${charIndex}`;

              if (char === ' ') {
                return (
                  <span
                    key={charKey}
                    style={{ width: '0.5em', display: 'inline-block' }}
                  >
                    &nbsp;
                  </span>
                );
              }

              const isCharHighlighted = isHighlighted(char, charIndex, text);
              const finalCharStyle = {
                ...characterStyle,
                color: isCharHighlighted ? '#FDD835' : 'white',
                WebkitTextStroke: isCharHighlighted
                  ? '1px #0066ff'
                  : '1px #0066ff',
              };

              return (
                <span key={charKey} style={finalCharStyle}>
                  {char}
                </span>
              );
            })}
          </div>
        </div>
      </div>
    </>
  );
};

export default VideoText;
